<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>  
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
	<title>设置-角色设置</title>
	<link href="../favicon.ico" rel="shortcut icon">
	<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/system/public.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/system/set.css" /> 
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/system/alert.css" />
	
	<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
   <div class="wrapper wrapper-content animated fadeInRight"> 
	   <div class="container-fluid">
	    <div class="row">
	        <div class="s_role col-md-12">
	            <ul class="s_role_condition fix col-md-12">    
	             	<shiro:hasPermission name="sys_role_search_button">            
	                <li>关键字<input type="text" placeholder="输入角色名/最近操作人" id="roleKW" maxlength="20"/></li>
	                <li class="s_search_btn"  onclick="doSelectByPage()"><i><img src="${pageContext.request.contextPath}/images/system/icon_search.png" /></i></li>
	                 </shiro:hasPermission>
	                <shiro:hasPermission name="sys_role_create_button">
	                <li><a href="javascript:;" class="J_s_box" ><img src="${pageContext.request.contextPath}/images/system/add_2.png" /> 添加角色</a></li>
	                </shiro:hasPermission>
	            </ul>
	            <table>
	                <thead>
	                    <tr>
	                      <th>创建人</th>
	                      <th>创建时间</th>
	                      <th>角色名</th>
	                      <th>最近操作人</th>
	                      <th>最后操作时间</th>
	                      <th>操作</th>
	                    </tr>
	                </thead>
	                <tbody id="tbody">
	                    <!----------   角色列表展示      ---------->
	                    
	                    <!---------    角色列表展示      ---------->
	                </tbody>
	            </table>
	            <div class="m_xpages">
	                <div class="mian" style="width:500px">
	                    <span>显示行数</span>
	                    <select id="pageNumSelect"><option>10</option><option>20</option><option>50</option></select>
	                    <span id="page_count">共0条</span>
	                    <span id="show_page"><i>0/0</i><i>页</i></span>
	                    <a href="javascript:;" class="prev" value="1">上一页</a>
	                    <a href="javascript:;" class="next" value="2">下一页</a>
	                    <span>跳转至第</span>
	                    <input type="text" value="1" class="text">
	                    <span>页</span>
	                </div>
	            </div>
	        </div>
	    </div>
	    </div>
   </div> 
    <!-- 添加角色弹框----------------------------------------------------------  -->
    <div class="s_popup">
        <div class="issue s_role_popup" style="height:600px;">
            <span><img src="${pageContext.request.contextPath}/images/system/close.png" /></span>
            <h4 id="h4">添加角色</h4>
            <div class="xk_input fix">
	            <span>角色名称</span>
	            <input type="text"  id="role_new_name"  maxlength="20"/><!-- class="s_input_red"  -->
             	<i id="tip_name_no"></i>
            </div>
            <h6 >模块权限设置</h6>
            <div id="h6" style="height:380px;overflow-y:auto;">
           		<!-- 展示所有的权限，拼接div--------------------------------------------------------- -->
            </div>
            <ol class="fix" style="margin-top:20px">
                <li><a href="javascript:;" class="s_cancel" style="margin-top:15px">取消</a></li>
                <li >
                	<a href="javascript:;" onclick="buttonSure(this.id)" id="createRoleSure"  class="sureBtn" style="margin-top:15px">确定</a>
                </li>
            </ol>
        </div>
    </div>
    
    <!-- 添加角色弹框----------------------------------------------------------  -->
    <div class="s_popup_delect2">
        <div class="s_consum">
            <p id="dialog_title"><img src="${pageContext.request.contextPath}/images/system/s_tick.png" /></p>
        </div>
    </div>
    
    <!-- 删除弹窗-------------------------------------------------------------- -->
    <div class="s_popup_box s_popup_delect" id="del_alert">
        <div class="s_popup_detailed issue_delect">
            <span><img src="${pageContext.request.contextPath}/images/system/close.png" id="chadiao"/></span>
            <h4><img src="${pageContext.request.contextPath}/images/system/warning.png" />&nbsp;删除提示</h4>
            <h5>确定要删除此角色吗？</h5>
            <p><a href="javascript:;" class="s_cancel_del" onclick="pdno()">取消</a> &nbsp;&nbsp;&nbsp;<a href="javascript:;" class="s_confirm_del" onclick="pdSure(0)" >确定</a></p>
        </div>
    </div>
    
   	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $('.J_s_box').click(function(){
          $('#h4').text('角色添加');
          $('#role_new_name').val('');
          $('.sureBtn').attr('id','createRoleSure');
          var imgs = $('#h6').find('img');
		  /* 先清空------ */
		  $(imgs).each(function(){
				$(this).attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
				$(this).attr('class','0');
		  });
          $('.s_popup').show();
          $('.issue').show();
          
        });
        /* 原点击触发切换对勾事件 */
        $('.s_popup .issue span').click(function(){
            $('.s_popup').hide();
            $('.issue').hide();
        });
        $('.s_cancel').click(function(){
            $('.s_popup').hide();
            $('.issue').hide();
        });
    </script>
    
    <script type="text/javascript">
    	/* LeeX */
    	/* 进入页面，加载所有权限 */
    	$(function(){
    		var url = "<%=path%>/api/role/selectAuthority";
	    	$.post(url,function(data){
	    		$('#h6').html();
	    		var list = data.list;
	    		for(i in list){
	    			 var nameEn = list[i].nameEn;
		    		 if(nameEn != 'login'){
		    			 if(nameEn != 'bm_button'){
		    				 if(nameEn != 'bc_button'){
					    		 var p_auth = list[i];
					    		 var p_id = p_auth.id;
					    		 var p_name = p_auth.name;
					    		 var c_list = p_auth.list;
				    			 var str = "";
					    		 for(i in c_list){
						    		 var c_name = c_list[i].name;
						    		 var c_id = c_list[i].id;
						    		 var s = '<li><img src="${pageContext.request.contextPath}/images/system/s_check.png" class="0" id="'+c_id+'" onclick="selectChildrenAuth(this.id)"/>'+c_name+'</li>';
						    		 str += s;
				    			 }
					    		 $('#h6').append(
							    			'<div class="s_module s_width_ol">'+
							              	 ' <p class="s_fx_li1">'+
							                      '<img src="${pageContext.request.contextPath}/images/system/s_check.png" class="0" id="'+p_id+'" onclick="selectParentAuth(this.id)" />'+
							                      p_name +
							                  '</p>'+
							                 ' <ol class="fix">'+
							                   str+
							                 '</ol>'+
							             ' </div>'
							     );
				    		} 
		    			 }
		    		 }
		    	}  
	    		
	    	},"json");
	    	
	    /* 进入页面，加载所有角色 */
    	doSelectByPage(1,10);
    	
    });
    </script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/system/exit.js"></script>
    <script type="text/javascript">
    /* 查询方法 */
    	function doSelectByPage(currentPage,pageNum){
        	var url = "<%=path%>/api/role/search_list";
        	var roleKW = $('#roleKW').val();
        	if(pageNum == null || pageNum == ''){
        		pageNum = $('#pageNumSelect').val();
        	}
        	$.post(
        		url,
        		{
        			"currentPage":currentPage,
        			"keyword":roleKW,
        			"pageNum":pageNum
        		},
        		function(data){
        			if(data.obj.count == null || data.obj.count == undefined){
        				$('#page_count').text('共'+0+'条'); /* 总条数 */
            			$('#show_page').html('<i id="p_e">'+0+'/'+0+'</i><i>页</i>'); /* 当前页加总页数 */
            			$('.text').attr('value',0); /* 当前页 */ 
        			}else{
	        			$('#page_count').text('共'+data.obj.count+'条'); /* 总条数 */
	        			$('#show_page').html('<i id="p_e">'+data.obj.currentPage+'/'+data.obj.pageCount+'</i><i>页</i>'); /* 当前页加总页数 */
	        			$('.text').attr('value',data.obj.currentPage); /* 当前页 */ 
        			}
        			var roles = data.obj.list;
        			var sstr = "";
        			$(roles).each(function(){
	        		  	sstr += '<tr>'+
		                        '<td>'+this.bak3+'</td>'+
		                        '<td>'+this.createTime+'</td>'+
		                        '<td>'+this.name+'</td>'+
		                        '<td>'+this.bak1+'</td>'+
		                        '<td>'+this.bak2+'</td>'+
		                        '<td>'+
		                        '<shiro:hasPermission name="sys_role_update_button">'+
		                        '<a href="javascript:;" id="'+this.id+'" class="editR">';
		                        if(this.remarks != "super"){
		                        	sstr +='编辑';
			        			}
		               sstr +=  '</a> '+
		               			'</shiro:hasPermission>'+
		               			'<shiro:hasPermission name="sys_role_delete_button">'+
		                        '<a href="javascript:;" id="'+this.id+'" class="deleteR">';
				                if(this.remarks != "super"){
		                       		sstr +='删除';
			        			}
		               sstr +=  '</a>'+
		               			'</shiro:hasPermission>'+
		                        '</td>'+
	                         '<tr>';
        			});
                  $('#tbody').html(sstr);
                  /* 获取当前页 */
          		var pe = $('#p_e').text().split('/');
          		var pe_p = parseInt(pe[0]);/* 当前页 */
          		var pe_n = parseInt(pe[1]);/* 总页数 */
          		if( pe_p == 1 || pe_p == 0){
          			$('.prev').html('<font color="#E0E0E0">上一页</font>');
          		}else{
          			$('.prev').html('上一页');
          		} 
          		
          		/* 获取当前页 */
          		if( pe_p == pe_n || pe_p == 0){
          			$('.next').html('<font color="#E0E0E0">下一页</font>');
          		}else{
          			$('.next').html('下一页');
          		} 
          		
        		},"json"
        			);
        	
        	
    }
    
    /* 子权限执行方法 */
    	function  selectChildrenAuth(id){
    		/* 获取当前对象的class属性 */
    		var flag = $(event.srcElement).attr('class');
    		/* 0没选中   1选中 */
    		if(flag == "1"){
    			$(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
        		$(event.srcElement).attr('class','0');
        		/* 需要获取当前子权限有没有选中的，有选中不执行下面的，没有就执行 */
        		/* 获取所有ol标签下的所有li标签下的所有的img */
        		var imgss = $(event.srcElement).parent().parent().children('li');
        		var fg = "0";/* 标记子权限中是否有选中的     0代表字标签中没有被选中的*/
        		//遍历获取当前div中所有子权限的img的class
        		$(imgss).each(function(){
        			var s = $(this).children().attr('class');
        			if(s == "1"){
        				fg = "1";
        			}
        		});
        		/* 只要有一 个子权限被选中，父权限都必须选中 */
        		if(fg == "0"){
	        		var la = $(event.srcElement).parent().parent().parent().children('p').children();
	        		la.attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
		    		la.attr('class','0');
        		}
    		}else{
	    		$(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
	    		$(event.srcElement).attr('class','1');
	    		var lb = $(event.srcElement).parent().parent().parent().children('p').children();
	    		lb.attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
	    		lb.attr('class','1');
    		}
    	}
    	
    /* 父权限执行方法 */
    	function selectParentAuth(id){
    		/* 获取当前对象的class属性 */
    		var flag = $(event.srcElement).attr('class');
    		/* 0没选中   1选中 */
    		if(flag == "1"){
    			$(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
        		$(event.srcElement).attr('class','0');
        		var la = $(event.srcElement).parent().parent().children('ol').children();
	    		la.children('img').attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
	    		la.children('img').attr('class','0');
    		}else{
	    		$(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
	    		$(event.srcElement).attr('class','1');
	    		var lb = $(event.srcElement).parent().parent().children('ol').children();
	    		lb.children('img').attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
	    		lb.children('img').attr('class','1');
    		}
    	}
    	/* 校验角色名字和添加添加角色 */
		function checkNewNameAndSumit(){
			var newName = $('#role_new_name').val();
			if(newName == '' || newName == null){
				$('#tip_name_no').text("角色名不能为空");
				return ;
			}
			$.ajax({
	             type: "POST",
	             url: "<%=path%>/api/role/check",
	             data: {
	            	 "newName":newName
	            	 },
	             dataType: "json",
	             success: function(data){
	            	 if(data.error_code == "20028"){
	            			showDialog(" 账户已被登陆，请重新登陆。");
	            			setTimeout('window.location.href="http://scrm.cecook.cn/"',2000);
	            		}
	            	var error_code =  data.error_code;
	            	if(error_code == "10013" || error_code == "10010"){
	            		/* 已存在或为空*/
	            		$('#role_new_name').attr('class','s_input_red');
	            		$('#tip_name_no').text(data.message);
	            		$('#role_new_name').val("");
	            	}else{
	            		$('#role_new_name').removeAttr('class');
	            		$('#tip_name_no').text("");
	            		submit();
	            	}
	             }
			});
		}


		/* 校验角色名字和添加修改角色 */
		function checkNewNameAndEditSumit(){
			var newName = $('#role_new_name').val();
			if(newName == '' || newName == null){
				$('#tip_name_no').text("角色名不能为空");
				return ;
			}
			if(editRoleName != newName){
				$.ajax({
		             type: "POST",
		             url: "<%=path%>/api/role/check",
		             data: {
		            	 "newName":newName
		            	 },
		             dataType: "json",
		             success: function(data){
		            	 if(data.error_code == "20028"){
		            			showDialog(" 账户已被登陆，请重新登陆。");
		            			setTimeout('window.location.href="http://scrm.cecook.cn/"',2000);
		            		}
		            	var error_code =  data.error_code;
		            	if(error_code == "10013" || error_code =="10010"){
		            		/* 已存在 */
		            		$('#role_new_name').attr('class','s_input_red');
		            		$('#tip_name_no').text(data.message);
		            		$('#role_new_name').val("");
		            	}else{
		            		$('#role_new_name').removeAttr('class');
		            		$('#tip_name_no').text("");
		            		editSubmit();
		            	}
		             }
				});
			}else{
				editSubmit();
			}
		}
		
		/* 确定按钮区别添加，修改 */
		function  buttonSure(idVal){
			if(idVal == "createRoleSure"){
				checkNewNameAndSumit();
			}else if(idVal == "editRoleSure"){
				checkNewNameAndEditSumit();
			}
		}
		
    </script>
    <script type="text/javascript">
    	/* 添加角色 */
    	function submit(){
    		/* 所有id */
    		var ids ="";
    		/* 获取h6标签下所有的div */
    		var divs = $('#h6').children('div');
    		$(divs).each(function(){
    			var cla =  $(this).children('p').children('img').attr('class');
    			if(cla == '1'){
    				var pid = $(this).children('p').children('img').attr('id')+",";
    				ids += pid;
    				/* 获取下面所有li标签子权限 */
    				var lis = $(this).children('ol').children();
  					$(lis).each(function(){
  						/* 标识查询或者非查 */
  						var v = $(this).text();
  						var z = $(this).children('img').attr('class');
	    				if("查询" == v || "查看" == v){
	    					var cid = $(this).children('img').attr('id')+"," ;
		    				ids += cid; 
	    				}else if(z == '1'){
	    					var cid = $(this).children('img').attr('id')+"," ;
		    				ids += cid; 
	    				}
  					});
    			}
    			
    		});
    		/* 添加登陆权限id */
    		ids += "61,";
    		$.post(
    			"<%=path%>/api/role/create",
    			{
    				"newName":$('#role_new_name').val(),
    				"auths":ids
    			},
    			function(data){
    				window.location.reload();
    			},"json"
    		);
    	}
    	
    	/* 编辑角色提交 */
    	function editSubmit(){
    		/* 所有id */
    		var ids ="";
    		/* 获取h6标签下所有的div */
    		var divs = $('#h6').children('div');
    		$(divs).each(function(){
    			var cla =  $(this).children('p').children('img').attr('class');
    			if(cla == '1'){
    				var pid = $(this).children('p').children('img').attr('id')+",";
    				ids += pid;
    				/* 获取下面权限的id */
    				var lis = $(this).children('ol').children();
  					$(lis).each(function(){
  						var v = $(this).text();
	    				if("查询" == v){
	    					var cid = $(this).children('img').attr('id')+"," ;
	    					ids += cid; 
	    				}else{
							var ca = $(this).children('img').attr('class');
							if(ca == "1"){
								var cid = $(this).children('img').attr('id')+",";
								ids += cid; 
							}
	    				}
  					});
    			}
    			
    		});
    		
    		/* 添加登陆权限 */
    		ids += "61,";
    		$.post(
    			"<%=path%>/api/role/update",
    			{
    				"newName":$('#role_new_name').val(),
    				"auths":ids,
    				"roleId":editRoleId
    				
    			},
    			function(data){
    				window.location.reload();
    			},"json"
    		);
    	}
    </script>
    <script type="text/javascript">
    /* 全局变量 */
    var editRoleId ;
    var editRoleName;
    	 /* 点击编辑，展示弹窗，获取对应角色的id  将id传入后台，返回角色的权限列表 */
     	$(document).on("click",'.editR',function(){
     		/* 弹窗 */
 			$('#h4').text('角色编辑');
 			$('#role_new_name').attr('class','');
 			$('.sureBtn').attr('id','editRoleSure');
       		$('#tip_name_no').text("");
 		    $('.s_popup').show();
 		    $('.issue').show();
 		   	var imgs = $('#h6').find('img');
			/* 先清空------ */
			$(imgs).each(function(){
					$(this).attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
					$(this).attr('class','0');
			});
 		    /* 赋值全局变量*/
 		    editRoleId = this.id;
 		    
 		    /* 查询对应角色的权限 */
 		    $.post(
 		    		"<%=path%>/api/role/selectAuthority",
     			{
 		    		"roleId":this.id
     			},
     			function(data){
     				if(data.error_code == "20028"){
     					showDialog(" 账户已被登陆，请重新登陆。");
     					setTimeout('window.location.href="http://scrm.cecook.cn/"',2000);
     				}
     				$('#role_new_name').val(data.name);
     				editRoleName = data.name;
     				/* 双重遍历展示---------- */
     				var list = data.list;
     				for(i in list){
						var mid = list[i].authorityId;
						$(imgs).each(function(){
	     					var yid = $(this).attr('id');
	     					if(mid == yid){
	     						$(this).attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
	     						$(this).attr('class','1');
							}
	     				});
					}
     				
     			},"json"
 		    );
     	});
    	 
    /* 删除角色 */
    $(document).on('click','.deleteR',function(){
    	panduan(this.id);
    });
    	 
    </script>
    <script type="text/javascript">
    	$('#roleKW').keyup(function(){
    		if (event.keyCode == "13") {
    			doSelectByPage();
    		}
    	});
    	/* 单击上一页 */
    	$('.prev').click(function(){
    		/* 获取当前页 */
    		var pe = $('#p_e').text().split('/');
    		var pe_p = parseInt(pe[0]);/* 当前页 */
    		var pe_n = parseInt(pe[1]);/* 总页数 */
    		if( pe_p != 1){
    			pe_p = pe_p - 1 ;
    			$('.text').attr('value',pe_p);
    			doSelectByPage(pe_p,$('#pageNumSelect').val());
    		}else if(pe_p == 1){
    			$('.prev').html('<font color="#E0E0E0">上一页</font>');
    		}
    	});
    	
    	/* 单击下一页 */
    	$('.next').click(function(){
    		/* 获取当前页 */
    		var pe = $('#p_e').text().split('/');
    		var pe_p = parseInt(pe[0]);/* 当前页 */
    		var pe_n = parseInt(pe[1]);/* 总页数 */
    		if( pe_p < pe_n){
    			pe_p = pe_p + 1 ;
    			$('.text').attr('value',pe_p);
    			doSelectByPage(pe_p,$('#pageNumSelect').val());
    		}else if(pe_p == pe_n){
    			$('.next').html('<font color="#E0E0E0">下一页</font>');
    		} 
    	});
    	
     	/* 单击前往第几页 */
    	$('.text').keyup(function(){
    		/* 获取当前页 */
    		if (event.keyCode == "13") {
    		var pe = $('#p_e').text().split('/');
    		var pe_p = parseInt(pe[0]);/* 当前页 */
    		var pe_n = parseInt(pe[1]);/* 总页数 */
    		var to_p = $(this).val();/* 用户输入页数 */
    		if( to_p >= 1){
    			if(to_p <= pe_n){
	    			$('.text').attr('value',to_p);
	    			doSelectByPage(to_p,$('#pageNumSelect').val());
    			}else{
    				showDialog('请输入正确页码');
    			}
    		} 
    	}
    	}); 
    	/* 单击每页显示 */
		$('#pageNumSelect').change(function(){
			var pe = $('#p_e').text().split('/');
    		var pe_p = parseInt(pe[0]);/* 当前页 */
    		doSelectByPage(pe_p,$('#pageNumSelect').val());
    	});
    	/* 关闭 弹窗 */
    	$('#chadiao').click(function(){
    		$('.s_popup_delect,.issue_delect').hide();
    		$('.s_confirm_del').attr('id','');
    	});
    </script>
<script type="text/javascript">
	$('#role_new_name').focus(function(){
		$('#tip_name_no').text("");
		$('#role_new_name').attr('class','');
	});
	function panduan(id){
		$('.s_confirm_del').attr('id','');
		$('.s_popup_delect,.issue_delect').show();
		$('.s_confirm_del').attr('id',id);
	}
	function pdSure(){
		$('.s_popup_delect,.issue_delect').hide();
		var del_id = $('.s_confirm_del').attr('id');
    	$.post(
    			"<%=path%>/api/role/delete",
    		{
    			"roleId":del_id	
    		},
    		function(data){
    			if(data.error_code == "20028"){
    				showDialog(" 账户已被登陆，请重新登陆。");
    				setTimeout('window.location.href="http://scrm.cecook.cn/"',2000);
    			}
    			if(data.status == 200){
    				/* 删除成功提示弹窗 */
    				showDialog(data.message);
    				setTimeout("window.location.reload()",1500);
    			}else{
    				/* 删除失败提示弹窗 */
    				showDialog(data.message);
    				setTimeout("window.location.reload()",1500);
    			}
    		},
    		"json"
    	);
	}
	function pdno(){
		$('.s_popup_delect,.issue_delect').hide();
		$('.s_confirm_del').attr('id','');
	}
</script>
<script type="text/javascript">
var auths = "<%=session.getAttribute("authoritys")%>";
</script>
</body>
</html>
